Forms

Forms can consist of the following inputs along with responsive grid classes. To ensure that forms are accessible the following guidelines should be observed:

Inputs

The form.input-base partial embeds a single input with an optional label on the page. Does not include any JS for form validation. <input> elements of type text create basic single-line text fields.

Attribute Description
error Sets an error state. Accepts a boolean, defaults to false.
field-id Sets a value in the id and for attributes to pair labels and inputs. Accepts a string, defaults to null.
classes Adds additional classes. Accepts a string of classes seperated by spaces, defaults to null.
label The label text. Accepts a string, defaults to null.
message An error message. Accepts a string, defaults to null.
placeholder The example placeholder text that displays in the input. Accepts a string, defaults to null.
required Specifies when a field is required. Accepts a boolean, defaults to null.
type Sets the type of the input. Accepts the types text, email, or search, defaults to text.
value Sets a default input value in the field. Accepts a string, defaults to null.

View

This is an error message.

HTML

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input id="text-field" class="cmp-form-field__input cmp-form-field__input--faux-placeholder" type="text" placeholder="Placeholder Text" required />

      <label for="text-field" class="cmp-form-label cmp-form-label--faux-placeholder">
        Text Field
      </label>
    </div>
  </div>
</div>

<!-- ignore -->
<div class="util-margin-all-xl"></div>
<!-- ignore -->

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input id="text-field-error" class="cmp-form-field__input cmp-form-field__input--faux-placeholder cmp-form-field__input--error" type="text" placeholder="Placeholder Text" aria-describedby="inputErrorExample" aria-invalid="true" required />

      <label for="text-field-error" class="cmp-form-label cmp-form-label--error cmp-form-label--faux-placeholder">
        Text Field
      </label>
    </div>
  </div>
  <p id="inputErrorExample" class="cmp-form__error-message">
    This is an error message.
  </p>
</div>

Email Input

<input> elements of type email are used to let the user enter and edit an e-mail address, or, if the multiple attribute is specified, a list of e-mail addresses.

View

Invalid email address.

HTML

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input id="email-field" class="cmp-form-field__input cmp-form-field__input--faux-placeholder" type="email" placeholder="you@example.com" required />

      <label for="email-field" class="cmp-form-label cmp-form-label--faux-placeholder">
        Email Field
      </label>
    </div>
  </div>
</div>

<!-- ignore -->
<div class="util-margin-all-xl"></div>
<!-- ignore -->

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input id="email-field-error" class="cmp-form-field__input cmp-form-field__input--faux-placeholder cmp-form-field__input--error" type="email" placeholder="you@example.com" aria-describedby="emailErrorExample" aria-invalid="true" required />

      <label for="email-field-error" class="cmp-form-label cmp-form-label--error cmp-form-label--faux-placeholder">
        Email Field
      </label>
    </div>
  </div>
  <p id="emailErrorExample" class="cmp-form__error-message">
    Invalid email address.
  </p>
</div>

Search Input

<input> elements of type search are text fields designed for the user to enter search queries into.

View

No results found.

HTML

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input id="Search-field" class="cmp-form-field__input cmp-form-field__input--faux-placeholder" type="search" placeholder="Insert Search" required />

      <label for="Search-field" class="cmp-form-label cmp-form-label--faux-placeholder">
        Search Field
      </label>
    </div>
  </div>
</div>

<!-- ignore -->
<div class="util-margin-all-xl"></div>
<!-- ignore -->

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input id="search-field-error" class="cmp-form-field__input cmp-form-field__input--faux-placeholder cmp-form-field__input--error" type="search" placeholder="Insert Search" aria-describedby="searchErrorExample" aria-invalid="true" required />

      <label for="search-field-error" class="cmp-form-label cmp-form-label--error cmp-form-label--faux-placeholder">
        Search Field
      </label>
    </div>
  </div>
  <p id="searchErrorExample" class="cmp-form__error-message">
    No results found.
  </p>
</div>

Checkboxes

The form.checkbox-base partial embeds a single checkbox with label on the page.

Attribute Description
checkbox-id Sets a value in the id and for attributes to pair labels and checkbox inputs. Accepts a string, defaults to null.
checked Sets a checkbox as checked by default. Accepts a boolean, defaults to false.
error Sets an error state. Accepts a boolean, defaults to false.
label The label text. Accepts a string, defaults to null.
value Defines the value that is sent with form data. Accepts a string, defaults to null.

View

Checkbox List Example

HTML

<div class="cmp-form-checkbox">
  <input id="checkbox-single" class="cmp-form-checkbox__input" type="checkbox" />
  <label for="checkbox-single" class="cmp-form-checkbox__label">
    Single Checkbox
  </label>
</div>

<!-- ignore -->
<div class="util-margin-all-xl"></div>
<!-- ignore -->

<div class="cmp-form-field--required">Checkbox List Example</div>
<ul class="util-delist">
  <li>
    <div class="cmp-form-checkbox">
      <input id="checkbox-list-1" class="cmp-form-checkbox__input" type="checkbox" required />
      <label for="checkbox-list-1" class="cmp-form-checkbox__label">
        Checkbox List Item One
      </label>
    </div>
  </li>
  <li>
    <div class="cmp-form-checkbox">
      <input id="checkbox-list-2" class="cmp-form-checkbox__input" type="checkbox" />
      <label for="checkbox-list-2" class="cmp-form-checkbox__label">
        Checkbox List Item Two
      </label>
    </div>
  </li>
  <li>
    <div class="cmp-form-checkbox">
      <input id="checkbox-list-3" class="cmp-form-checkbox__input" type="checkbox" />
      <label for="checkbox-list-3" class="cmp-form-checkbox__label">
        Checkbox List Item Three
      </label>
    </div>
  </li>
  <li>
    <div class="cmp-form-checkbox">
      <input id="checkbox-list-4" class="cmp-form-checkbox__input" type="checkbox" />
      <label for="checkbox-list-4" class="cmp-form-checkbox__label">
        Checkbox List Item Four
      </label>
    </div>
  </li>
</ul>

Radios

The form.radio-base partial embeds a single radio with label on the page.

Attribute Description
checked Sets a radio as checked by default. Accepts a boolean, defaults to false.
error Sets an error state. Accepts a boolean, defaults to false.
group Sets a value to the name attribute. Used to group multiple radios together. Accepts a string, defaults to null.
label The label text. Accepts a string, defaults to null.
radio-id Sets a value in the id and for attributes to pair labels and radio inputs. Accepts a string, defaults to null.
value Defines the value that is sent with form data. Accepts a string, defaults to null.

View

Radio List Example

HTML

<div class="cmp-form-radio">
  <input id="radio-single" class="cmp-form-radio__input" type="radio" name="radio-single" />
  <label for="radio-single" class="cmp-form-radio__label">
    Single Radio Button
  </label>
</div>
<!-- ignore -->
<div class="util-margin-all-xl"></div>
<!-- ignore -->

<div class="cmp-form-field--required">Radio List Example</div>
<ul class="util-delist">
  <li>
    <div class="cmp-form-radio">
      <input id="radio-list-1" class="cmp-form-radio__input" type="radio" name="radio-list" required />
      <label for="radio-list-1" class="cmp-form-radio__label">
        Radio List Item One
      </label>
    </div>
  </li>
  <li>
    <div class="cmp-form-radio">
      <input id="radio-list-2" class="cmp-form-radio__input" type="radio" name="radio-list" />
      <label for="radio-list-2" class="cmp-form-radio__label">
        Radio List Item Two
      </label>
    </div>
  </li>
  <li>
    <div class="cmp-form-radio">
      <input id="radio-list-3" class="cmp-form-radio__input" type="radio" name="radio-list" />
      <label for="radio-list-3" class="cmp-form-radio__label">
        Radio List Item Three
      </label>
    </div>
  </li>
  <li>
    <div class="cmp-form-radio">
      <input id="radio-list-4" class="cmp-form-radio__input" type="radio" name="radio-list" />
      <label for="radio-list-4" class="cmp-form-radio__label">
        Radio List Item Four
      </label>
    </div>
  </li>
</ul>

Textarea

The form.textarea-base partial embeds a single textarea with label on the page. Does not include any JS for form validation.

Attribute Description
error Sets an error state. Accepts a boolean, defaults to false.
field-id Sets a value in the id and for attributes to pair labels and inputs. Accepts a string, defaults to null.
classes Adds additional classes. Accepts a string of classes seperated by spaces, defaults to null.
label The label text. Accepts a string, defaults to null.
message An error message. Accepts a string, defaults to null.
required Specifies when a field is required. Accepts a boolean, defaults to null.

View

This is an error message

HTML

<div class="cmp-form-field">
  <div class="cmp-form-field--required">

    <label for="textarea-field" class="cmp-form-label">
      Textarea
    </label>
  </div>
  <textarea id="textarea-field" class="cmp-form-field__textarea" required></textarea>
</div>

<!-- ignore -->
<div class="util-margin-all-xl"></div>
<!-- ignore -->

<div class="cmp-form-field">
  <div class="cmp-form-field--required">

    <label for="textarea-field-error" class="cmp-form-label cmp-form-label--error">
      Textarea
    </label>
  </div>
  <textarea id="textarea-field-error" class="cmp-form-field__textarea cmp-form-field__textarea--error" aria-describedby="textareaErrorExample" aria-invalid="true" required></textarea>
  <p id="textareaErrorExample" class="cmp-form__error-message">
    This is an error message
  </p>
</div>

Select Field

The form.select-base partial embeds a single select with an optional label on the page. Does not include any JS for form validation.

Attribute Description
error Sets an error state. Accepts a boolean, defaults to false.
select-id Sets a value in the id and for attributes to pair labels and select fields. Accepts a string, defaults to null.
classes Adds additional classes. Accepts a string of classes seperated by spaces, defaults to null.
label The label text. Accepts a string, defaults to null.
message An error message. Accepts a string, defaults to null.
required Specifies when a field is required. Accepts a boolean, defaults to null.
Block Name Description
option-list Holds the option tags for the select box.

View

This is an error message.

HTML

<div class="cmp-form-select">
  <label for="select" class="cmp-form-label">
    Select Dropdown
  </label>
  <div class=" cmp-form-select--required">
    <select id="select" class="cmp-form-select__dropdown" name="Select Field" required>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
  </div>
</div>

<!-- ignore -->
<div class="util-margin-all-xl"></div>
<!-- ignore -->

<div class="cmp-form-select">
  <label for="select-error" class="cmp-form-label cmp-form-label--error">
    Select Dropdown with Error
  </label>
  <div class=" cmp-form-select--required">
    <select id="select-error" class="cmp-form-select__dropdown cmp-form-select__dropdown--error" name="Select Field" aria-describedby="selectErrorExample" aria-invalid="true" required>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
  </div>
  <p id="selectErrorExample" class="cmp-form__error-message">
    This is an error message.
  </p>
</div>